<template>
    <div>
        <div style="height:calc(40vh - 25px);">
            <RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick"
                           :on-line-click="onLineClick"/>
        </div>
    </div>
</template>

<script>
    import RelationGraph from 'relation-graph'

    export default {
        name: "reportRelation",
        components: {RelationGraph},
        props:{
          destCompany:String
        },
        data() {
            return {
                graphOptions: {
                    "backgrounImage": "",
                    "backgrounImageNoRepeat": true,
                    "layouts": [
                        {
                            "label": "中心",
                            "layoutName": "force",
                            "layoutClassName": "seeks-layout-center",
                            "defaultExpandHolderPosition": "hide",
                            "defaultJunctionPoint": "border"
                        }
                    ],
                    "defaultLineMarker": {
                        "markerWidth": 12,
                        "markerHeight": 12,
                        "refX": 6,
                        "refY": 6,
                        "data": "M2,2 L10,6 L2,10 L6,6 L2,2"
                    },
                    "allowShowMiniNameFilter": true,
                    "allowSwitchLineShape": false,
                    "allowShowMiniView": false,
                    "defaultNodeColor": "rgba(29, 220, 241, 1)",
                    "defaultNodeBorderColor": "#90E1EE"
                }
            }
        },
        created() {
            this.showSeeksGraph()
        },
        methods: {
            showSeeksGraph: async function(){
                var __graph_json_data = {
                    "rootId": "a",
                    "nodes": [
                        {
                            "id": "a",
                            "text": "贵州茅台"
                        }
                    ],
                  "links":[
                    {
                      "from":"a",
                      "to":"a"
                    }
                  ]
                }
                console.log("company")
                console.log(this.destCompany)
                let request = {'queryType':0,'limit':50,'destName':this.destCompany}
                let res = await this.$api.report.getQueryRelationData(request)
                if (res.data.code == 1){
                  res = res.data.data
                  __graph_json_data = JSON.parse(res)
                }
                // 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置
                this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
                    console.log(seeksRGGraph)
                })
            },
            // onNodeClick(nodeObject, $event) {
            //     console.log('onNodeClick:', nodeObject)
            // },
            // onLineClick(lineObject, $event) {
            //     console.log('onLineClick:', lineObject)
            // }
        },

    }
</script>

<style scoped>

</style>
